<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            width: 1200px;
            margin: auto;
        }

        li {
            width: 23%;
            margin: 1%;
            background-color: #eee;
        }

        img {
            width: 80%;
            height: 300px;
        }
    </style>
</head>

<body>

    <ul>
        <!-- <li>
            <img src="" alt="">
            <h3></h3>
            <p></p>
            <button>加入购物车</button>
        </li> -->
    </ul>

    <script>

        // 一般情况下   加入购物车之前是需要登陆的   但是也有少许网站  可以不登录就加入购物车

        // 买东西 ： 谁？？？？？？？  买了   几件？？？  什么 ？？？

        // 如果需要实现无登陆加入购物车    这个数据就不知道是谁想买的   只能把数据存在本地
        //     cookie / localStorage / sessionStorage

        //     localStorage

        // 如何存数据  'yyCart'   [{id,img,price,num...},{}]


        const data = [
            {
                "goodsId": "A001",
                "goodsName": "华为 HUAWEI P40 Pro",
                "goodsMsg": "华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G",
                "goodsImg": "https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg",
                "goodsPrice": 5988
            },
            {
                "goodsId": "A002",
                "goodsName": "Apple iPhone 11",
                "goodsMsg": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G",
                "goodsImg": "https://img10.360buyimg.com/n7/jfs/t1/41566/13/14792/149059/5d7809a7E99b4ed1b/56ea66c5f8a6f724.jpg",
                "goodsPrice": 5999
            },
            {
                "goodsId": "A003",
                "goodsName": "一加8Pro OnePlus",
                "goodsMsg": "一加8Pro OnePlus 1+8Pro 5G手机2K+120Hz 青空色",
                "goodsImg": "https://img13.360buyimg.com/n7/jfs/t1/131844/26/2030/179283/5ee212b8E6037a065/8ebdf06de22e64e0.jpg",
                "goodsPrice": 5399
            },
            {
                "goodsId": "A003",
                "goodsName": "小米10pro",
                "goodsMsg": "小米10pro 双模5G游戏手机【至高12期分期0首付】 珍珠白 12G+256G",
                "goodsImg": "https://img12.360buyimg.com/n7/jfs/t1/130507/6/2419/623986/5eea0995E7333f0e8/7ebbebf5a6312e30.png",
                "goodsPrice": 4928
            }
        ];



        render();




        function addToCart(i, id) {
            console.log(i, id);   // 点击的是第几个按钮
            // 判断这个商品在不在购物车里面   从localStorage中取数据
            const res = localStorage.getItem('yyCart');
            if (res) {
                // console.log(222);
                // 说明不是第一次加入购物车
                // 判断这个商品在不在购物车里面
                const res2 = JSON.parse(res);    // 转成数组
                console.log(res2);
                const res3 = res2.find(item => item.goodsId === id);
                if (res3) {
                    console.log('买过 ');
                    res3.num++;
                    localStorage.setItem('yyCart', JSON.stringify(res2))
                }
                else {
                    console.log('没买过');
                    const obj = data[i];
                    obj.num = 1;
                    res2.push(obj);
                    localStorage.setItem('yyCart', JSON.stringify(res2))
                }
            }
            else {
                // 如果找不到，说明是第一次加入购物车
                const obj = data[i];
                // 加入数量
                obj.num = 1;

                localStorage.setItem('yyCart', JSON.stringify([obj]))
            }
        }





        function render() {
            let html = '';
            data.forEach((item, i) => {
                // 如何存数据
                //   1 可以在标签上绑定自定义属性  存数据--- 只能存字符串   如果想存对象，就转一下
                //   2 直接通过行内事件的这个函数，把参数传进去
                html += `
                    <li>
                        <img src="${item.goodsImg}" alt="">
                        <h3>${item.goodsName}</h3>
                        <p>${item.goodsMsg}</p>
                        <button data='${JSON.stringify(item)}' onclick="addToCart(${i} , '${item.goodsId}')">加入购物车</button>
                    </li>
                `
            })

            document.querySelector('ul').innerHTML = html
        }




    </script>
</body>

</html>